<template>
	<div>
		<div>
			<Form  inline>
				<FormItem>
					<Input type="text" v-model="params.title" placeholder="请输入产品标题">
					<Icon type="ios-cube-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>

				<FormItem>
					<Select v-model="params.relationTableId" style="width: 180px;" prefix="ios-list-box-outline" placeholder="请输入产品分类">
						<Option :value="item.id" v-for="(item,index) in searchCategoryList" :key="index">{{item.name}}</Option>
					</Select>
				</FormItem>
				<FormItem>
					<Button type="primary" icon="ios-search-outline" style="margin-right: 10px;" @click="search">查询</Button>
					<Button type="primary" icon="md-add" @click="add">
						新增
					</Button>
				</FormItem>
			</Form>
		</div>

		<Table border :columns="columns" :data="data"></Table>
	    <div style="margin: 10px;overflow: hidden">
	        <div style="float: right;">
	            <Page :total="total" :current="params.current"   @on-change="changePage" ></Page>
	        </div>
	    </div>
		<Modal v-model="model" :title="modalType+'产品'" :mask-closable="false" :footer-hide="true" width='40%'>
			<Form :model="formItem" :label-width="100" ref="formValidate" :rules="ruleValidate">
				<FormItem label="产品名称(中)" prop="title">
					<Input v-model="formItem.title" placeholder="请输入产品名称"></Input>
				</FormItem>
				<FormItem label="产品名称(英)" prop="engTitle">
					<Input v-model="formItem.engTitle" placeholder="请输入产品名称"></Input>
				</FormItem>
				<FormItem label="产品名称(日)" prop="jpnTitle">
					<Input v-model="formItem.jpnTitle" placeholder="请输入产品名称"></Input>
				</FormItem>
				<FormItem label="产品描述" prop="describeInfo">
					<Input v-model="formItem.describeInfo" placeholder="请输入产品描述"></Input>
				</FormItem>
				<Row>
					<Col span="12">
					<FormItem label="产品分类" prop="relationTableId">
						<Select v-model="formItem.relationTableId" prefix="ios-list-box-outline" placeholder="请输入产品分类">
							<Option :value="item.id" v-for="(item,index) in categoryList" :key="index">{{item.name}}</Option>
						</Select>
					</FormItem>
					</Col>

					<Col span="12">
					<FormItem label="产品排序">
						<Input v-model="formItem.showOrder" placeholder="请输入产品排序"></Input>
					</FormItem>
					</Col>
				</Row>

				<FormItem label="产品图片">
					<Upload :action="$baseUrl+'uploadFile/upload/file'" name="file" :show-upload-list="false" :format="['jpg','png']" :max-size="10*1024" :on-success="handleSuccess" :on-format-error="formatError" :on-exceeded-size="exceededSize">
						<Button icon="ios-cloud-upload-outline">上传封面</Button>
					</Upload>
				</FormItem>

				<FormItem label="" v-show="imgList.length>0">
					<div class="img-item" v-for="(item,index) in imgList" :key="index">
						<div class="wrap-head">
							<img :src="item.fileUrl" alt="" />
						</div>
						<div class="wrap-foot" @click="delImg(index)">
							<Icon type="ios-trash-outline" size="20" />
						</div>
					</div>
				</FormItem>

				<FormItem label="产品详情" style="display: none;">
					<editor ref="editor"></editor>
				</FormItem>

				<FormItem>
					<Button type="primary" @click="submit">确认</Button>
					<Button style="margin-left: 8px" @click="cancel">取消</Button>
				</FormItem>
			</Form>
		</Modal>
		<Modal v-model="removeModal" width="360">
			<p slot="header" style="color:#f60;text-align:center">
				<Icon type="ios-information-circle"></Icon>
				<span>删除警告?</span>
			</p>
			<div style="text-align:center">
				<p>请确认是否删除这条记录</p>
			</div>
			<div slot="footer">
				<Button type="error" size="large" long @click="delOk">删除</Button>
			</div>
		</Modal>
	</div>

</template>
<script>
import rowImages from '@/components/image/row-images.vue'
import Editor from '../components/editor.vue'
export default {
  components: {
    rowImages,
    Editor
  },
  data () {
    return {
      removeModal: false,
      currentId: '',
      modalType: null,
      imgList: [],
      searchCategoryList: [],
      categoryList: null,
      params: {
        current: 1,
        relationTableId: 0,
        size: 10,
        title: '',
        categoryId: 2
      },
      total: 0,
      formItem: {
        title: '',
        describeInfo: '',
        showOrder: '',
        relationTableId: ''
      },
      ruleValidate: {
        title: [{
          required: true,
          message: '资讯标题不能为空',
          trigger: 'blur'
        }],
        engTitle: [{
          required: true,
          message: '资讯标题不能为空',
          trigger: 'blur'
        }],
        jpnTitle: [{
          required: true,
          message: '资讯标题不能为空',
          trigger: 'blur'
        }],
        describeInfo: [{
          required: true,
          message: '资讯描述不能为空',
          trigger: 'blur'
        }]
      },
      model: false,
      columns: [
        {
          title: '产品标题(中)',
          key: 'title',
          align: 'center'
        },
        {
          title: '产品标题(英)',
          key: 'engTitle',
          align: 'center'
        },
        {
          title: '产品标题(日)',
          key: 'jpnTitle',
          align: 'center'
        },
        {
          title: '产品分类',
          key: 'name',
          align: 'center'
        },
				    {
          title: '产品图片',
          searchItemAble: false,
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            if (params.row.uploadFile.fileUrl) {
              var images = new Array()
              images[0] = {
                'thumb': params.row.uploadFile.fileUrl,
                'image': params.row.uploadFile.fileUrl
              }
              return h(rowImages, {
                props: {
                  images: images,
                  dwidth: 180,
                  dheight: 100
                }
              })
            } else {
              return h('div', '暂无图片')
            }
          }
        },
        {
          title: '排序',
          key: 'showOrder'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '下架')
            ])
          }
        }
      ],
      data: []
    }
  },
  methods: {
    // 下架接口
    delOk () {
      let params = {
        ids: this.currentId
      }
      this.$Axios.Post(this.$baseUrl + 'relationFile/remove', params).then(res => {
        this.removeModal = false
        this.afterRequest(res)
      })
    },
    remove (row) {
      this.removeModal = true
      this.currentId = row.id
    },
    // 图片上传成功后执行
    handleSuccess (response, file, fileList) {
      this.imgList = []
      this.imgList.push(response)
    },
    // 文件格式错误
    formatError () {
      this.$Notice.error({
        title: '文件格式只支持jpg,png',
        desc: false
      })
    },
    // 文件大小超出
    exceededSize () {
      this.$Notice.error({
        title: '文件大小超出10M',
        desc: false
      })
    },
    changePage (res) {
      this.params.current = res
      this.onLoad()
    },
    resetForm () {
      this.formItem = {
        title: '',
        engTitle: '',
        jpnTitle: '',
        describeInfo: '',
        showOrder: '',
        relationTableId: '',
        describeInfo: ''
      }
      this.imgList = []
      this.$refs['editor'].setHtml('')
    },
    add () {
      this.model = true
      this.modalType = '新增'
      this.resetForm()
    },
    edit (row) {
      this.currentId = row.id
      this.modalType = '编辑'
      this.model = true
      this.formItem = {
        title: row.title,
        engTitle: row.engTitle,
        jpnTitle: row.jpnTitle,
        describeInfo: row.describeInfo,
        showOrder: row.showOrder,
        relationTableId: row.relationTableId,
        describeInfo: row.describeInfo
      }
      this.imgList = []
      this.imgList.push(row.uploadFile)
      this.$refs['editor'].setHtml(row.richText)
    },
    cancel () {
      this.$refs['formValidate'].resetFields()
      this.model = false
    },
    afterRequest (B) {
      if (B) {
        this.$Notice.success({
          title: '操作成功',
          desc: false
        })
        this.model = false
        this.onLoad()
      } else {
        this.$Notice.error({
          title: '操作失败',
          desc: false
        })
      }
    },
    submit () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (this.imgList.length > 0) {
            this.formItem.fileId = this.imgList[0].id
          } else {
            this.formItem.fileId = ''
          }
          this.formItem.richText = this.$refs['editor'].getHtml()
          let url
          if (this.modalType == '新增') {
            url = this.$baseUrl + 'relationFile/save'
          } else {
            this.formItem.id = this.currentId
            url = this.$baseUrl + 'relationFile/update'
          }
          this.$Axios.Post(url, this.formItem).then(res => {
            this.afterRequest(res)
          })
        }
      })
    },
    delImg (index) {
      this.imgList.splice(index, 1)
    },
    search () {
      this.params.current = 1
      this.onLoad()
    },
    onLoad () {
      this.$Axios.Post(this.$baseUrl + 'relationFile/page', this.params).then(res => {
        this.data = res.records
        this.total = res.total
      })
    },
    getCategory () {
      this.$Axios.Get(this.$baseUrl + 'categorySub/list?categoryId=2').then(res => {
        let obj = {
          id: 0,
          name: '全部产品'
        }
        this.categoryList = res
        this.searchCategoryList.push(obj)
        this.searchCategoryList = this.searchCategoryList.concat(res)
      })
      
    }
  },
  mounted () {
    this.getCategory()
    this.onLoad()
  }
}
</script>
<style scoped="">
	.fuzhu {
		margin-left: 10px;
		color: #BCBCBC;
	}

	.img-item {
		width: 100px;
		border: 1px solid #BCBCBC;
		float: left;
		margin-right: 4px;
	}

	.wrap-head {
		width: 100%;
		height: 100px;
	}

	.img-item img {
		width: 100%;
		height: 100%;
	}

	.wrap-foot {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
	}
</style>
